<div class="clr-row clr-col-lg-12">
    <div class="clr-col-lg-6">
        <h3>{{'APP_BACKUP_STRATEGY'|translate}}</h3>
        <form clrForm #backupStrategyForm="ngForm">
            <clr-input-container>
                <label>{{'APP_BACKUP_CRON'|translate}}</label>
                <input class="input-width" size="20" clrInput type="number" [(ngModel)]="backupStrategy.cron"
                       name="cron"
                       required oninput="if(value<1)value=1" min="1"
                       max="300"/>
                <clr-control-helper>1~300</clr-control-helper>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_BACKUP_SAVE_NUM'|translate}}</label>
                <input class="input-width" clrInput size="20" type="number" [(ngModel)]="backupStrategy.saveNum"
                       name="saveNum"
                       required
                       oninput="if(value<1)value=1" min="1" max="100"/>
                <clr-control-helper>1~100</clr-control-helper>
            </clr-input-container>
            <clr-select-container>
                <label>{{'APP_BACKUP_ACCOUNT'|translate}}</label>
                <select class="input-width" clrSelect name="project" [(ngModel)]="backupStrategy.backupAccountName"
                        required>
                    <option *ngFor="let b of backupAccounts" value="{{b.name}}">{{b.name}}({{ b.bucket}})</option>
                </select>
                <clr-control-helper>{{'APP_BACKUP_ACCOUNT_HELPER'|translate}}</clr-control-helper>
            </clr-select-container>
            <clr-select-container>
                <label>{{'APP_STATUS'|translate}}</label>
                <select class="input-width" clrSelect name="status" [(ngModel)]="backupStrategy.status" required>
                    <option value="ENABLE">{{'APP_STATUS_ENABLE'|translate}}</option>
                    <option value="DISABLE">{{'APP_STATUS_DISABLE'|translate}}</option>
                </select>
            </clr-select-container>
        </form>
        <div class="modal-footer clr-row">
            <div class="btn-group btn-primary">
                <button class="btn btn-info-outline" (click)="onBackup()" [disabled]="backupStrategy.id == ''">
                    {{'APP_BACKUP_NOW'|translate}}
                </button>
            </div>
            <div class="btn-group btn-primary">
                <button class="btn btn-info-outline" [disabled]="backupStrategyForm.invalid"
                        (click)="onSubmit()">{{'APP_COMMIT'|translate}}
                </button>
            </div>
        </div>
    </div>
    <div class="clr-col-lg-6">
        <h3>{{'APP_CLUSTER_RESTORE_BY_LOCAL'|translate}}</h3>
        <p class="p7 prompt">{{'APP_BACKUP_RESTORE'|translate}}</p>
        <div class="modal-body modal-height">
            <form clrForm #itemForm="ngForm" enctype="multipart/form-data">
                <div style="display: inline-flex;">
                    <clr-input-container class="clr-control-container clr-col-md-9">
                        <label class="clr-col-md-4">{{"APP_FILE"|translate}}</label>
                        <input class="clr-col-md-8" clrInput name="name"  placeholder="{{this.file?.name || 'APP_FILE_SELECTED_NOTHING' | translate}}" disabled/>
                    </clr-input-container>
                    <div style="margin-top: 1.2rem;" class="clr-col-md-3">
                        <label style="margin-left: 15px;" for="chart" class="btn btn-secondary btn-sm file-browser-btn">{{"APP_FILE_SELECT"|translate}}</label>
                        <input style="display: none;" class="file-input" type="file" id="chart" name="chart" ngModel (change)="upload($event)">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" (click)="onUploadFile()"
                    [disabled]="itemForm.invalid || file == null">{{"APP_COMMIT"|translate}}</button>
        </div>
    </div>
</div>
<br>
<app-backup-list></app-backup-list>
